import React from "react"
import {Avatar, Icon, Popover, Badge, Button} from 'antd'
import {Link} from 'react-router-dom'
import './index.less'

const content = (
  <div>
    <p>Message 1</p>
    <p>Message 2</p>
    <p>Message 3</p>
    <p>Message 4</p>
    <p>Message 5</p>
  </div>
);

const handleLogoutClick = () => {
  sessionStorage.setItem("isLogin", false)
}

const UserInto = (
  <div>
    <h4>Name: Allen</h4>
    <h4>Profile</h4>
    <h4>Setting</h4>
    <Link to="/login">
      <Button type="primary" onClick={handleLogoutClick}>Logout</Button>
    </Link>
  </div>
)

class GlobalHeader extends React.PureComponent {
  render() {
    return (
      <div className="right">
        <span className="action">
          <Icon type="search" />
        </span>
        <span className="action">
          <Popover placement="bottom" content={content} title="Message" trigger="click">
            <Badge count={5}>
              <Icon type="bell" />
            </Badge>
          </Popover>
        </span>
        <span className="action">
          <Popover placement="bottom" content={UserInto} title="Message">
            <Avatar icon="user" />UserName
          </Popover>
        </span>
      </div>
    )
  }
}

export default GlobalHeader
